<template>
  <a-modal
    :title="`商品类型${model ? '编辑' : '新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-decorator="['name']" placeholder="请填写名称" />
        </a-form-item>
        <a-row>
          <a-col :span="8">
            <a-form-item
              label="主图"
              class="form-header"
              style="margin-bottom:0"
              :labelCol="{ span: 9 }"
              :wrapperCol="{ span: 15 }"
            >
              <d-upload v-decorator="['img_url', { initialValue: '' }]"> </d-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { goodsKindsAdd, goodsKindsEdit } from '@/api/goods'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['name', 'id', 'img_url']
export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.editAction = goodsKindsEdit
    this.addAction = goodsKindsAdd
    return {
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 }
        }
      }
    }
  }
}
</script>
